.border-top {
  border-top: 1px solid #e6edf2;
}
.border-bottom {
  border-bottom: 1px solid #e6edf2;
}

.table {
  display: block !important;
  text-align: center;
  font-size: 14px;
  color: #36434d;
  &.table_1 {
    font-size: 16px;
    .table-header {
      .table-row {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        .table-col {
          height: 100%;
          display: flex;
          justify-content: center;
          &.col-end {
            width: 72px;
          }
          .types {
            display: flex;
            .type-item {
              flex: 1;
              border-right: 1px solid var(--yd-primary-color);
              background: rgba(255, 255, 255, 0.4);
              &:last-child {
                border-right-width: 0px;
              }
            }
          }
        }
      }
    }
    .table-content {
      & > .table-row {
        background: rgba(61, 136, 242, 0.3);
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        &:nth-child(2n) {
          background: rgba(61, 136, 242, 0.1);
        }
        .col-end {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .grid-box {
          display: grid;
          .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #fff;
            &:last-child {
              border-right-width: 0;
            }
          }
        }
        & > div {
          border-right: 1px solid #fff;
          height: 100%;
        }
      }
    }
    .table-col {
      border-right: 1px solid #fff;
    }
    .table-row {
      & > .col-start:nth-child(-n + 2) {
        word-break: break-all;
      }
    }
  }
  .table-header {
    .table-col {
      border-right: 1px solid #fff;

      &:last-child {
        border-right-width: 0px;
      }
    }
  }
  .cell {
    padding: 8px;
  }
  .col-start {
    width: auto;
  }
  .flex {
    flex: 1;
  }
  .col-end {
    width: auto;
    flex-shrink: 0;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      cursor: pointer;
      width: 16px;
      height: 16px;
    }
  }
  .row-col-flex {
    & > div {
      flex: 1;
    }
  }
  .table-header {
    background: #E6EDF2;
  }
  .table-col {
    display: flex;
    flex-direction: column;
  }
  .table-row {
    display: flex;
    align-items: center;
    &.background {
      background-color: #f5f8fa;
    }
    &.background-white {
      background-color: #ffffff;
    }
  }
  .airport-type-item:last-child {
    border-bottom: 0;
  }
  .starter-type-item:last-child {
    border-bottom: 0;
  }
  .name {
    padding: 13px 16px;
  }
}

.airline-table {
  .col-end {
    width: 213px !important;
  }
  .table-row {
    &.white-bg {
      background-color: #fff;
    }
    &.gray-bg {
      background-color: #d1dde9;
    }
  }
}

@media screen and (max-width: 768px) {
  .table-container:nth-child(1),
  .table-container:nth-child(3) {
    .table > .table-header > .table-row,
    .table > .table-content > .table-row {
      & > div:nth-child(3) {
        box-shadow: -1px 0px 1px rgba(0, 0, 0, 0.1);
      }
      & > div:last-child {
        box-shadow: -1px 0 1px rgba(0, 0, 0, 0.1);
      }
    }
  }
  .table {
    font-size: 55px;
    .cell {
      padding: 64px;
    }
    .col-start {
      width: 400px;
    }
    .col-end {
      width: 300px;
      svg {
        width: 64px;
        height: 64px;
      }
    }
    .table-header > .table-row,
    .table-content > .table-row {
      & > div:nth-child(2) {
        display: none;
      }
    }
    // 设置类型滚动条
    .table-header {
      .table-col:nth-child(3) {
        overflow-x: scroll;
      }
      .type-item {
        width: 250px;
      }
    }
    .table-row {
      .scroll-x {
        & > div {
          flex-basis: 250px;
          min-width: 250px;
        }
      }
    }
  }
  .airline-table {
    width: 200%;
    .table-header > .table-row,
    .table-content > .table-row {
      & > div:nth-child(2) {
        display: block;
      }
    }
  }
}
